<template>
  <div class="box">
    <el-form
      :model="store.state.projectCenter.form"
      label-position="top"
      label-width="120px"
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="项目名称:" required>
        <el-select
          v-model="store.state.projectCenter.form.projectName"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目编号:">
        <el-input
          v-model="store.state.projectCenter.form.projectNumber"
          disabled
          placeholder="项目关联带入"
        />
      </el-form-item>
      <el-form-item label="项目外文名称:">
        <el-input v-model="store.state.projectCenter.form.foreignName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="立项年份:" required>
        <el-select
          v-model="store.state.projectCenter.form.projectYear"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关联部门:" required>
        <el-select
          v-model="store.state.projectCenter.form.department"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目曾用名:" required>
        <el-select
          v-model="store.state.projectCenter.form.formerName"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目级别:" required>
        <el-select v-model="store.state.projectCenter.form.level" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目类别:" required>
        <el-select
          v-model="store.state.projectCenter.form.projectType"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目来源:" required>
        <el-select
          v-model="store.state.projectCenter.form.projectSource"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业类型（一级）:" required>
        <el-select
          v-model="store.state.projectCenter.form.primaryProfessionType"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业类型（二级）:" required>
        <el-select
          v-model="store.state.projectCenter.form.secondaryProfessionType"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业类型（三级）:" required>
        <el-select
          v-model="store.state.projectCenter.form.tertiaryProfessionType"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="委托单位:" required>
        <el-select
          v-model="store.state.projectCenter.form.entrustedUnit"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内部承担单位:" required>
        <el-select
          v-model="store.state.projectCenter.form.internalUnit"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目负责人:" required>
        <el-select
          v-model="store.state.projectCenter.form.projectLeader"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话:" required>
        <el-select
          v-model="store.state.projectCenter.form.contactNumber"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目开始时间:" required>
        <el-date-picker
          v-model="store.state.projectCenter.form.startTime"
          format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="规定完工日期:" required>
        <el-date-picker
          v-model="store.state.projectCenter.form.endTime"
          format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="总经费(万元):" required>
        <el-input v-model="store.state.projectCenter.form.totalFunding" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="所属单位:" required>
        <el-select
          v-model="store.state.projectCenter.form.affiliatedUnit"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属二级单位:" required>
        <el-select
          v-model="store.state.projectCenter.form.secondaryUnit"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专利权属声明:" required>
        <el-select
          v-model="store.state.projectCenter.form.patentOwnershipDeclaration"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="软著信息:" required>
        <el-select
          v-model="store.state.projectCenter.form.softwareCopyright"
          class="m-2"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" style="width: 100%">
        <el-input
          v-model="store.state.projectCenter.form.remarks"
          :rows="3"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="研发目标:" required style="width: 100%">
        <el-input
          v-model="store.state.projectCenter.form.researchTarget"
          :rows="3"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="主要研究内容:" required style="width: 100%">
        <el-input
          v-model="store.state.projectCenter.form.mainResearchContent"
          :rows="3"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="立项申请书:" style="width: 100%">
        <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
          <el-button type="primary">Click to upload</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { useStore } from 'vuex'
export default {
  components: {},
  setup() {
    const store = useStore()
    // const form = reactive({
    //   projectName: '', //项目名称
    //   projectNumber: '', //项目编号
    //   foreignName: '', //项目外文名称
    //   projectYear: '', //立项年份
    //   department: '', //关联部门
    //   formerName: '', //项目曾用名
    //   level: '', //项目级别
    //   projectSource: '', //项目来源
    //   primaryProfessionType: '', // 专业类型（一级）
    //   secondaryProfessionType: '', // 专业类型（二级）
    //   tertiaryProfessionType: '', // 专业类型（三级）
    //   entrustedUnit: '', // 委托单位
    //   internalUnit: '', // 内部承担单位
    //   projectLeader: '', // 项目负责人
    //   contactNumber: '', // 联系电话
    //   startTime: '', // 项目开始时间
    //   endTime: '', // 项目结束时间
    //   totalFunding: '', // 总经费(万元)
    //   affiliatedUnit: '', // 所属单位
    //   secondaryUnit: '', // 所属二级单位
    //   patentOwnershipDeclaration: '', // 专利权属声明
    //   softwareCopyright: '', // 软著信息
    //   remarks: '', // 备注
    //   researchTarget: '', // 研发目标
    //   mainResearchContent: '', // 主要研究内容
    //   projectType: '', // 项目类别
    // })
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
    ]
    return {
      options,
      store,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 24%;
}
// .el-form--inline .el-form-item {
//   display: -webkit-inline-box;
// }
/deep/.labelHeight .el-form-item__label {
  line-height: 20px;
}

/deep/.el-date-editor.el-input {
  width: 100%;
}

/deep/.el-date-editor.el-input__inner {
  width: 100%;
}

/deep/.demo-form-inline .el-select {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
  }
}

.el-tag {
  margin-right: 10px;
}
.radio {
  display: flex;
  margin-top: 10px;
}
.el-radio {
  // margin-right: 10px;
}
:deep(.el-form--label-top .el-form-item__label) {
  padding: 0;
}
</style>
